<template>
  <div class="addGoods">
    <div class="shoppingShow" v-for="(addGoods,shopping) in addGoods" :key="shopping">
        <img :src="addGoods.mainPic" class="goodsShow">
        <div class="shoppingShowRight">
            <p class="goodsTitle">{{addGoods.productName}}</p>
            <span class="goodslabel">{{addGoods.productGrade}}级</span>
            <!-- <span class="goodslabel">{{addGoods.productOpenness}}度开放</span> -->
            <span class="goodslabel">{{addGoods.productLength}}</span>
            <span class="goodslabel">{{addGoods.color}}</span>
            <p class="goodsMarket">市场均价:￥{{addGoods.averagePrice}}元</p>
            <span class="goodsPrice">￥{{addGoods.productPrice}}元/束</span>  
            <img src="../assets/images/add@2x.png" class="shoppingAdd">
        </div>  
    </div>    
  </div>
</template>

<script>
export default {
    name:"addGoods",
    props:{
      addGoods:{
        type:Array,
        default:[]
      }
    }
}
</script>

<style scoped>
  .addGoods{
    background-color: rgba(247,249,252,1);
  }
  .shoppingShow{
    width:100%;
    display: flex;
    margin-top: 10px;
    background-color: #fff;
  }
  .goodsShow{
    width: 112px;
    height: 112px;
    vertical-align: middle;
    margin-left: 9px;
    margin-top: 12px;
    flex: 0.5;
  }
  .shoppingShowRight{
    margin-left: 13px;
    vertical-align: middle;
    flex: 1;
  }
  .goodsTitle{
    font-size:14px;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:18px;
    white-space:nowrap;
  }
  .goodslabel{
    background:#f7f9fc;
    border-radius:2px;
    font-size:10px;
    font-weight:500;
    color:rgba(169,173,191,1);
    line-height:18px;
    margin:0 5px;
    padding: 2px;
    text-align:center;
  }
  .goodsMarket{
    margin-top:8px;
  }
  .goodsMarket{
    background:#fff0e6;
    border-radius:3px;
    font-size:10px;
    font-weight:500;
    color:rgba(255,97,0,1);
    line-height:18px;
    width: 130px;
  }
  .goodsPrice{
    font-size:18px;
    font-weight:bold;
    color:rgba(255,98,0,1);
  }
  .shoppingAdd{
    width: 21px;
    height: 21px;
    vertical-align: middle;
    margin-left: 80px;
  }
</style>